import type { FC } from 'react';
import { View, Text } from 'react-native';
import { Avatar } from '@/components';
import type { User } from '@/typings/user';
import styles from './styles';

type ParticipantsProps = {
  users: User.UserInfo[];
  total: number;
}

const Participants: FC<ParticipantsProps> = (props) => {
  const { users, total } = props;
  const totalLabel = total > 99 ? '99+' : total;

  return (
    <View style={styles.wrapper}>
      <View style={styles.participants}>
        {users.map((user, i) => {
          return (
            <Avatar
              key={i}
              size="mini"
              url={user.avatar}
              style={styles.participant}
            />
          );
        })}
        <Text style={styles.totalText}>
          {totalLabel} Participant{total > 1 ? 's' : ''}
        </Text>
      </View>
    </View>
  );
}

export default Participants;